<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
    <view class="content">
        <!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
        <!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
        <z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" :auto="false">
            <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
            <view class="order-list">
                <view class="list">
                    <view class="lib" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.order_no)">
                        <view class="title-status">
                            <view class="title">
                                <text class="p1">订单号：</text>
                                <text class="p2">{{item.order_no}}</text>
                            </view>
                            <view class="status">
                                <text>{{selectDictLabel(stateList,item.orders_state)}}</text>
                                <!-- 订单状态 '':全部 -1:已取消 0:未接单 1:已接单 2:已(服务)完成 :src="item.cover_pict"-->
                                <text class="iconfont icon-laji del" v-if="item.orders_state===-1 || item.orders_state===2" @click.stop="del(item.order_no)">
                                </text>
                            </view>
                        </view>
                        <view class="goods-list">
                            <view class="goods">
                                <view class="cinema-img">
                                    <image :src="item.movie_film_pic"></image>
                                </view>
                                <view class="item">
                                    <view class="goods-name">
                                        <text class="title one-omit">
                                            {{item.movie_film_name}}
                                        </text>
                                        <text class="desc">下单时间：{{item.pay_success_time}}</text>
                                    </view>
                                    <view class="goods-price">
                                        <text class="price">{{item.pay_total_price}}</text>
                                        <text class="num">×{{ item.total_number }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="status-btn">
                            <view></view>
                            <view class="button">
                                <view class="btn" @click.stop="handleBtn(item.order_no,'cancle')">
                                    <text>取消订单</text>
                                </view>
                                <view class="btn e8" @click.stop="toDetail(item.order_no)">
                                    <text>查看详情</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <DialogBox ref="DialogBox"></DialogBox>

        </z-paging>
    </view>
</template>
<script>
import { movieState } from "@/api/dictionary.js"
import { getServiceLists, setServiceOrderToCancel, setServiceOrderToDel, setServiceOrderToComplete } from "@/api/my/orderList.js"

import { getOrderLists } from "@/api/movie.js"
export default {
    props: {
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
            dataList: [],
            firstLoaded: false,
            queryParams: {
                page: 1,
                limit: 10,
                key_order_no: '',
                key_orders_state: '',
            },
            loading: true,
            stateList: movieState, //订单状态 -2:已关闭 -1:已取消 0:待付款 1:待出票 2:已出票 3:已完成
        }
    },
    props: {
        //当前组件的index，也就是当前组件是swiper中的第几个
        tabIndex: {
            type: Number,
            default: function () {
                return 0
            }
        },
        //当前swiper切换到第几个index
        currentIndex: {
            type: Number,
            default: function () {
                return 0
            }
        }
    },
    watch: {
        currentIndex: {
            handler(newVal) {
                if (newVal === this.tabIndex) {
                    //懒加载，当滑动到当前的item时，才去加载
                    if (!this.firstLoaded) {
                        this.$nextTick(() => {
                            setTimeout(() => {
                                this.queryParams.key_orders_state = this.stateList[newVal].dictValue
                                this.$refs.paging.reload();
                            }, 100);
                        })
                    }
                }
            },
            immediate: true
        },
    },
    created() {
        console.log(this.type)
    },
    methods: {
        getList(page) {
            this.loading = true
            this.queryParams.page = page
            getOrderLists(this.queryParams).then(res => {
                console.log(res, 788888)
                this.$refs.paging.complete(res.data.lists);
                this.loading = false
            }).catch(err => {
                this.$refs.paging.complete(false);
                this.loading = false
            })
        },
        itemClick(item) {
            console.log('点击了', item.title);
        },
        /*** 订单列表点击*/
        onOrderList(orderNo) {
            uni.navigateTo({
                url: '/pagesA/my/serviceDetail?orderNo=' + orderNo,
            })
        },
        del(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要删除订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setServiceOrderToDel({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已删除订单")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        cancle(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要取消订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setServiceOrderToCancel({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已取消订单")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        toDetail(id) {
            uni.navigateTo({
                // url: "/pages/service/order?data=" + encodeURIComponent(JSON.stringify(res.data))
                url: "/pagesB/movie/ticket-detail?order_no=" + id
            })
        },
        handleBtn(id, type) {
            let data = {
                id: id,
                type: type
            }
            this.$emit('handleBtn', data)
        },
    }
}
</script>

<style>
/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
.content {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.order-list {
  width: 100%;
  .list {
    .lib {
      padding: 0 4%;
      min-height: 400rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      .title-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;
        .title {
          display: flex;
          align-items: center;
          line-height: 26rpx;
          .p1 {
            font-size: 26rpx;
            color: #3c3c3c;
          }
          .p2 {
            font-size: 26rpx;
            color: #989898;
          }
        }
        .status {
          display: flex;
          align-items: center;
          text {
            font-size: 26rpx;
            color: #e5530e;
          }
          .del {
            padding: 10rpx;
            font-size: 34rpx;
            color: #222222;
            background-color: #f6f6f6;
            border-radius: 100%;
            margin-left: 20rpx;
          }
        }
      }
      .goods-list {
        width: 100%;
        padding: 30rpx 0;
        border-top: 2rpx solid #dcdcdc;
        border-bottom: 2rpx solid #dcdcdc;
        .goods {
          display: flex;
          align-items: center;
          width: 100%;
          .cinema-img {
            width: 160rpx;
            height: 222rpx;
            margin-right: 30rpx;
            image {
              width: 160rpx;
              height: 222rpx;
              border-radius: 20rpx;
            }
          }
          .item {
            display: flex;
            align-items: center;
            width: 70%;
            height: 100%;
            justify-content: space-between;
            .goods-name {
              width: 80%;
              height: 100%;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .title {
                font-size: 26rpx;
                color: #0a0a0a;
                font-weight: 600;
                margin-bottom: 14rpx;
              }
              .desc {
                display: block;
                font-size: 24rpx;
                color: #999999;
              }
              text:nth-child(2) {
                margin-bottom: 14rpx;
              }
            }
            .goods-price {
              display: flex;
              flex-direction: column;
              text-align: right;
              .price {
                font-size: 26rpx;
                color: #3c3c3c;
                margin-bottom: 30rpx;
              }
              .num {
                font-size: 26rpx;
                color: #3c3c3c;
              }
              // text {
              //   color: #222222;
              // }
              // .min {
              //   font-size: 26rpx;
              // }
              // .max {
              //   font-size: 34rpx;
              // }
            }
          }
        }
      }
      .status-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;
        .code {
          text {
            font-size: 24rpx;
            color: #e8380d;
          }
        }
        .button {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          height: 100%;
          .btn {
            padding: 10rpx 30rpx;
            border: 2rpx solid #eeeeee;
            border-radius: 100rpx;
            margin-left: 20rpx;
            text {
              font-size: 26rpx;
              color: #555555;
            }
          }
          .action {
            background-color: #ea5504;
            border: 2rpx solid #e5530e;
            text {
              color: #ffffff;
            }
          }
          .e8 {
            border: 2rpx solid #e8380d;
            text {
              color: #e8380d;
            }
          }
        }
      }
    }
    /deep/.uni-scroll-view::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
